<template>
  <div class="certificate-list-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">许可证书列表</h1>
    </div>

    <!-- 搜索栏和操作按钮 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-6 mb-6">
      <div class="flex items-center justify-between">
        <el-input
          v-model="searchText"
          placeholder="搜索用户名称/所属单位/电话号码"
          class="w-96"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search text-neutral-400"></i>
          </template>
        </el-input>

        <el-button color="#1890ff" plain class="!border-primary-500 !text-primary-500 hover:!bg-primary-50">
          <i class="fas fa-user mr-2"></i>个人空间
        </el-button>
      </div>
    </div>

    <!-- 许可证书表格 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm overflow-hidden">
      <el-table
        :data="filteredCertificates"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '500' }"
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="permissionId" label="许可证id" width="120" align="center" />
        <el-table-column prop="deviceId" label="设备标识" width="120" />
        <el-table-column prop="username" label="用户名称" width="120" />
        <el-table-column prop="department" label="所属单位" width="120" />
        <el-table-column prop="phone" label="电话号码" width="140" />
        <el-table-column prop="status" label="激活状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.status === '已激活' ? 'success' : 'info'" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="activateTime" label="激活时间" width="180" />
        <el-table-column prop="expireTime" label="到期时间" width="180" />
        <el-table-column prop="approver" label="审批人" width="100" />
        <el-table-column prop="approveTime" label="审批时间" width="180" />
        <el-table-column label="操作" width="240" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewDetail(row)">
              查过
            </el-button>
            <el-button type="danger" size="small" @click="deleteCertificate(row)">
              撤销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const searchText = ref('')

// 模拟许可证书数据
const certificates = ref([
  { id: 1, permissionId: 111, deviceId: 'xxx', username: '是是是', department: 'jrlc', phone: '13366664444', status: '已激活', activateTime: '2023-10-05 14:32:35', expireTime: '2023-10-05 14:32:35', approver: '张三', approveTime: '2023-10-05 14:32:35' },
  { id: 2, permissionId: 222, deviceId: 'xxx', username: '是是是', department: 'jrlc', phone: '13366664444', status: '待激活', activateTime: '', expireTime: '', approver: '张三', approveTime: '2023-10-05 14:32:35' }
])

const filteredCertificates = computed(() => {
  let result = certificates.value
  if (searchText.value) {
    result = result.filter(cert => 
      cert.username.includes(searchText.value) ||
      cert.department.includes(searchText.value) ||
      cert.phone.includes(searchText.value)
    )
  }
  return result
})

const viewDetail = (row) => {
  ElMessage.info(`查看许可证 ${row.permissionId} 的详情`)
}

const deleteCertificate = (row) => {
  ElMessageBox.confirm(`确定要撤销许可证 ${row.permissionId} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = certificates.value.findIndex(c => c.id === row.id)
    if (index > -1) {
      certificates.value.splice(index, 1)
      ElMessage.success('撤销成功')
    }
  }).catch(() => {})
}
</script>

<style scoped>
.certificate-list-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

